<template>
  <el-container class="upload_container">
    <!-- 上传头像区域 -->
    <div class="upload_box">
      <el-row>
        <el-col :span="12"
          ><div class="span_box_1">
            <span class="title_style">上传</span>
          </div></el-col
        >
        <el-col :span="12"
          ><div class="span_box_2">
            <img
              class="image_style"
              src="~/assets/images/crossing.png"
              alt=""
            /></div
        ></el-col>
      </el-row>
    </div>
    <!-- 上传表单区域 -->
    <el-form
      :label-position="labelPosition"
      label-width="120px"
      :model="formLabelAlign"
      id="changeForm"
    >
      <!-- 上传封面图、上传预览图 -->
      <div class="upload_image">
        <el-form-item prop="imgUrl">
          <!-- 上传封面图 -->
          <div id="div1">
            <span class="text_style">上传封面图</span>
            <el-upload
              class="avatar-uploader"
              action="https://imct.oss-cn-beijing.aliyuncs.com"
              accept="image/png,image/gif,image/jpg,image/jpeg"
              :limit="1"
              :before-upload="beforeAvatarUpload"
              :show-file-list="true"
              :file-list="fileList1"
              :http-request="toUploadfile1"
              v-if="formLabelAlign.coverurl == ''"
              :on-change="handleChange"
            >
              <i class="el-icon-picture avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-form-item>
        <div class="img_button">
          <img
            v-if='this.show'
            referrerpolicy="no-referrer"
            content="never"
            ref="img"
            :src="imageUrl"
            alt="加载图片失败"
            class="avatar-uploader-icon1"
          />
          <el-button v-if='this.show' class="coverbutton">
            <i class="el-icon-delete" @click="deleteImg()"></i>
          </el-button>
        </div>
        <!-- <div id="div2">
        <span class="text_style">上传预览图</span>
        <div class="div_">
          <div class="div_n" v-for="n in 12" :key="n">
            <el-upload
              class="avatar-uploader_1"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :file-list="fileList2"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar_1" />
              <i v-else class="el-icon-picture avatar-uploader-icon_1"></i>
            </el-upload>
          </div>
        </div>
      </div> -->
        <el-form-item>
          <!-- 上传预览图 -->
          <div id="div2">
            <span class="text_style">上传预览图</span>
            <avue-form :option="option" v-model="form"></avue-form>
            <!-- <el-upload
              ref="pictureUpload"
              action="https://imct.oss-cn-beijing.aliyuncs.com"
              list-type="picture-card"
              :file-list="fileList2"
              :http-request="toUploadfile2"
              class="avatar-uploader_1"
            >
              <i
                slot="default"
                class="el-icon-picture avatar-uploader-icon_1"
              ></i>
              <div slot="file" slot-scope="{ file }">
                <img class="avatar-uploader-icon_1" :src="file.picurl" alt="" />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove_1(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <img 
                width="100%"
                v-if="dialogImageUrl"
                referrerpolicy="no-referrer"
                v-bind:src="dialogImageUrl"
                :alt="加载图片失败"
              />
            <el-dialog :visible.sync="dialogVisible" v-for="item in dialogImageUrl" :key="item">
              <img width="100%" :src=item alt="" />
            </el-dialog>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>         -->
          </div>
        </el-form-item>
      </div>

      <!-- 上传商品 -->
      <div class="upload_goodinfo">
        <el-form-item>
          <div id="divone">
            <span class="text_style">上传商品</span>
            <el-upload
              class="avatar-uploader_2"
              action="https://imct.oss-cn-beijing.aliyuncs.com"
              name="file"
              :before-remove="beforeRemove"
              :on-remove="onRemove3_1"
              :limit="1"
              :file-list="fileList3_1"
              :http-request="toUploadfile3_1"
            >
              <i class="el-icon-sell avatar-uploader-icon_2">  mesh</i>
            </el-upload>
            <el-upload
              class="avatar-uploader_2"
              action="https://imct.oss-cn-beijing.aliyuncs.com"
              name="file"
              :before-remove="beforeRemove"
              :on-remove="onRemove3_2"
              :limit="1"
              :file-list="fileList3_2"
              :http-request="toUploadfile3_2"
            >
              <i class="el-icon-sell avatar-uploader-icon_2">  albedo</i>
            </el-upload>
            <el-upload
              class="avatar-uploader_2"
              action="https://imct.oss-cn-beijing.aliyuncs.com"
              name="file"
              :before-remove="beforeRemove"
              :on-remove="onRemove3_3"
              :limit="1"
              :file-list="fileList3_3"
              :http-request="toUploadfile3_3"
            >
              <i class="el-icon-sell avatar-uploader-icon_2">  normal</i>
            </el-upload>
            <el-upload
              class="avatar-uploader_2"
              action="https://imct.oss-cn-beijing.aliyuncs.com"
              name="file"
              :before-remove="beforeRemove"
              :on-remove="onRemove3_4"
              :limit="1"
              :file-list="fileList3_4"
              :http-request="toUploadfile3_4"
            >
              <i class="el-icon-sell avatar-uploader-icon_2">  mask</i>
            </el-upload>
            <el-upload
              class="avatar-uploader_2"
              action="https://imct.oss-cn-beijing.aliyuncs.com"
              name="file"
              :before-remove="beforeRemove"
              :on-remove="onRemove3_5"
              :limit="1"
              :file-list="fileList3_5"
              :http-request="toUploadfile3_5"
            >
              <i class="el-icon-sell avatar-uploader-icon_2">  emissive</i>
            </el-upload>
          </div>
        </el-form-item>
        <div id="divtwo">
          <el-form-item label="名称">
            <el-input v-model="formLabelAlign.goodname"></el-input>
          </el-form-item>
          <el-form-item label="价格（￥）">
            <el-input v-model="formLabelAlign.price"></el-input>
          </el-form-item>
        </div>
      </div>

      <!-- 商品简介 -->
      <div id="goodsIntro">
        <!-- <el-form-item>
          <span class="text_style">简介</span>
          <el-card shadow="always" class="box-card">
            <el-input
              autosize
              v-model="formLabelAlign.introduction"
            ></el-input>
          </el-card>
        </el-form-item> -->
        <span class="text_style">简介</span>
        <el-card shadow="always" class="box-card">
        <quillEditor
          v-model="formLabelAlign.introduction"
          ref="myQuillEditor"
          :options="editorOption"
          @focus="onEditorFocus($event)"
          @blur="onEditorBlur($event)"
          @change="onEditorChange($event)"
          class="editor"
        ></quillEditor>
        <el-form-item action method="post" enctype="multipart/form-data" id="uploadFormMulti">
          <input
            style="display: none"
            :id="uniqueId"
            type="file"
            name="file"
            multiple
            accept="image/jpg, image/jpeg, image/png, image/gif"
            @change="uploadImg('uploadFormMulti')"
          />
        </el-form-item>
        </el-card>
      </div>

      <!-- 选择分类 -->
      <div id="classification">
        <el-form-item>
          <div>
            <span class="text_style">选择分类</span>
            <el-radio-group
              v-model="formLabelAlign.type"
              size="medium"
              style="zoom: 180%"
            >
              <el-radio
                class="type_style"
                v-for="type in types"
                :label="type"
                :key="type"
                >{{ type }}</el-radio
              >
            </el-radio-group>
          </div>
        </el-form-item>
      </div>
      <!-- 上传按钮 -->
      <div class="button">
        <el-button class="uploadbutton" @click="onUpload"> 上传 </el-button>
      </div>
    </el-form>
  </el-container>
</template>

<script>
import { uploadToAli } from "@/utils/alioss.js";
import { doUpload } from "../../crm/myinfo/myinfo";
import { EventBus } from "bus/mybus.js";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
// 工具栏配置
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: "-1" }, { indent: "+1" }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{ direction: "rtl" }], // 文本方向-----[{'direction': 'rtl'}]
  [{ size: ["small", false, "large", "huge"] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: [] }], // 字体种类-----[{ font: [] }]
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ["clean"], // 清除文本格式-----['clean']
  ["image", "video"] // 链接、图片、视频-----['link', 'image', 'video']
];
const typeOptions = [
  "环境-3D",
  "艺术品-3D",
  "植物-3D",
  "物品-3D",
  "粒子动画",
  "艺术品-2D",
  "视频",
  "材料",
  "音乐",
];
export default {
  name: "upload",
  components: {
    quillEditor
  },
  data() {
    this.id = localStorage.getItem("operatorId");
    return {
      uniqueId: "uniqueId",
      content: "", // 富文本编辑器默认内容
      editorOption: {
        //  富文本编辑器配置
        modules: {
          toolbar: toolbarOptions
        },
        theme: "snow",
        placeholder: "请输入正文"
      },
      //选择分类
      types: typeOptions,
      // checkedTypes: ['环境-3D',],
      //缩略图
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      //封面图
      imageUrl: "",
      imageUrl_yulan:[],
      // date_yulan: null,
      show: false,
      fileList1: [],
      fileList2: [],
      fileList3_1: [],
      fileList3_2: [],
      fileList3_3: [],
      fileList3_4: [],
      fileList3_5: [],
      // fileList3: [],
      file: {
        url: "",
      },
      labelPosition: "right",
      formLabelAlign: {
        coverurl: "",
        covername: "",
        pics: [
          {
            picname: "",
            picurl: "",
          }
        ],
        picname: "",
        picurl: "",
        // documenturl: "",
        // documentname: "",
        mesh:"",
        albedo:"",
        normal:"",
        mask:"",
        emissive:"",
        goodname: "",
        price: "",
        introduction: "",
        type: "",
      },
      form: {
          video:'/i/movie.ogg',
          imgUrl:[
            {"label": "img", "value": "/images/logo-bg.jpg" },
            {"label": "video", "value": 'https://www.w3school.com.cn/i/movie.ogg'},
            {"label":'audio',"value":'https://www.runoob.com/try/demo_source/horse.mp3'}
          ],
      },
      option: {
        labelWidth: 120,
        column: [
          {
            label: '照片墙',
            prop: 'imgUrl4',
            type: 'upload',
            span: 24,
            listType: 'picture-card',
            tip: '只能上传jpg/png文件，且不超过500kb',
            propsHttp: {
              url:'url',
              name:'name',
              res: 'data'
            },
            action: 'https://imct.oss-cn-beijing.aliyuncs.com'
          },
        ]
      },
    };
  },
  computed: {
    //当前富文本实例
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  },
  // watch:{
  //   fileList2 : function (newVal){
  //     this.date_yulan = null;
  //     this.date_yulan = setTimeout(this.fileList3=newVal, 1000);
  //   }
  // },
  // mounted() {
  //   this.imageUrl = this.$refs.img.src;
  //   var _this = this;
  //   var imgHandler = async function(image) {
  //     if (image) {
  //       var fileInput = document.getElementById(_this.uniqueId); //隐藏的file文本ID
  //       fileInput.click(); //加一个触发事件
  //     }
  //   };
  //   _this.editor.getModule("toolbar").addHandler("image", imgHandler);
  // },
  methods: {
    // 准备富文本编辑器
    onEditorReady() {},
    // 富文本编辑器 失去焦点事件
    onEditorBlur() {},
    // 富文本编辑器 获得焦点事件
    onEditorFocus() {},
    // 富文本编辑器 内容改变事件
    onEditorChange() {},
    uploadImg: async function() {
      var _this = this;
      //构造formData对象
      var formData = new FormData();
      formData.append("file", document.getElementById(_this.uniqueId).files[0]);
      try {
        //调用上传文件接口
        this.$http.productapi.uploadImgReq(formData).then(res => {
          //返回上传文件的地址
          let url = res;
          if (url != null && url.length > 0) {
            let Range = _this.editor.getSelection();
            url = url.indexOf("http") != -1 ? url : "http:" + url;
            //上传文件成功之后在富文本中回显(显示)
            _this.editor.insertEmbed(
              Range != null ? Range.index : 0,
              "image",
              url
            );
          } else {
            _this.$message.warning("图片上传失败");
          }
          //成功之后,将文件的文本框的value置空
          document.getElementById(_this.uniqueId).value = "";
        });
      } catch ({ message: msg }) {
        document.getElementById(_this.uniqueId).value = "";
        _this.$message.warning(msg);
      }
    },
    // //选择分类
    // handleCheckedCitiesChange(value) {
    //   let checkedCount = value.length;
    //   this.checkAll = checkedCount === this.cities.length;
    //   this.isIndeterminate =
    //     checkedCount > 0 && checkedCount < this.cities.length;
    // },
    // 上传封面图删除操作
    // handleRemove(file) {
    //   //console.log(file);
    //   file.url == "";
    // },
    // handleRemove(file){
    // // 1.获取将要删除图片的临时路径
    //     const filePath = file.response.data.tmp_path
    //     // 2.从pics数组中，找到图片对应的索引值
    //     const i = this.formData.pics.findIndex(x => x.pic === filePath)
    //     // 3.调用splice方法，移除图片信息
    //     this.formData.splice(i, 1)
    // },

    //删除图片
    deleteImg() {
      this.$confirm("是否删除该照片?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.fileList1 = [];
          this.imageUrl = "";
          // this.$refs.img.src = this.imageUrl;
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.$router.go(0);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    //缩略图删除
    handleRemove_1(file) {
      const uploadFiles = this.$refs.pictureUpload.uploadFiles;
      // console.log(file);
      // console.log(uploadFiles);
      // console.log(this.fileList2);
      // this.fileList2 = [];
      for (let i = 0; i < uploadFiles.length; i++) {
        // this.fileList2.push({name: uploadFiles[i].name, url:uploadFiles[i].url});
        if (uploadFiles[i].name === file.name) {
            uploadFiles.splice(i, 1);
            // this.fileList2.splice(i, 1);
        }
      }   
      // console.log(uploadFiles);
      this.fileList2 = [];
      for(let i = 0; i < uploadFiles.length; i++) {
        this.fileList2.push({name: uploadFiles[i].name, url:uploadFiles[i].url});
      }
      console.log(this.fileList2);
    },

		// handleChange(file, fileLists) {
		// 	// console.log(file);
		// 	// console.log(fileLists);
		// 	// // 本地服务器路径
		// 	// console.log(URL.createObjectURL(file.raw));
		// 	// // 本地电脑路径
		// 	// console.log(document.getElementsByClassName("el-upload__input")[0].value); 
    //   console.log(file);
    //   console.log('file', URL.createObjectURL(file.raw));
    //   this.image = URL.createObjectURL(file.raw);
		// },
    //改变图片（传本地图片）
    handleChange(file){
      var _this = this;
      var event = event || window.event;
      var file = event.target.files[0];
      var reader = new FileReader();
      // reader.readAsDataURL(file);
      if(file){
        reader.readAsDataURL(file);
      }
      //转base64
      reader.onload = function(e) {
      _this.imageUrl = e.target.result //将图片路径赋值给src
      }
    },
    // handleChange_yulan(file){
    //   // this.imageUrl_yulan.push(file.url);
    //   // for(let i = 0; i < this.imageUrl_yulan.length; i++){
    //   // }
    //   var _this = this;
    //   var event = event || window.event;
    //   var file = event.target.files[0];
    //   var reader = new FileReader();
    //   // reader.readAsDataURL(file);
    //   if(file){
    //     reader.readAsDataURL(file);
    //   }
    //   //转base64
    //   reader.onload = function(e) {
    //   _this.imageUrl = e.target.result //将图片路径赋值给src
    //   }
    // },


    //缩略图放大
    handlePictureCardPreview(file) {
      console.log(file.url);
      console.log(file.picurl);
      this.dialogImageUrl = file.picurl;
      this.dialogVisible = true;
    },
    // handleDownload(file) {
    //   //console.log(file);
    // },
    //上传封面
    // handleAvatarSuccess(res, file, fileList) {
    //   console.log("aaa");
    //   // this.imageUrl = URL.createObjectURL(file.raw);
    //   this.imageUrl = file.data.url;
    //   console.log(this.imageUrl);
    // },

    beforeAvatarUpload(file) {
      // const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      // if (!isJPG) {
      //   this.$message.error("上传头像图片只能是 JPG 格式!");
      // }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      // return isJPG && isLt2M;
      return isLt2M;
    },

    async toUploadfile1(file) {
      var storeAs = "file/" + new Date().getTime() + "&" + file.file.name;
      // this.name = file.file.name
      var uploadUrl = "https://imct.oss-cn-beijing.aliyuncs.com/" + storeAs;
      // this.uploadUrl = uploadUrl
      await uploadToAli(storeAs, file.file);
      const fileObj = {
        name: file.file.name,
        url: uploadUrl,
      };

      this.fileList1.push(fileObj);
      this.formLabelAlign.coverurl = this.fileList1[0].url;
      this.formLabelAlign.covername = this.fileList1[0].name;
      this.imageUrl = this.fileList1[0].url;
      this.show = true;
    },

    // getChange(){
    //   this.date_yulan = setTimeout(toUploadfile2(file),500);
    // },
    async toUploadfile2(file) {
      console.log(file.url);
      console.log(file.picurl);
      var storeAs = "file/" + new Date().getTime() +"s"+ file.file.name;
      // this.name = file.file.name
      var uploadUrl = "https://imct.oss-cn-beijing.aliyuncs.com/" + storeAs;
      // this.uploadUrl = uploadUrl
      await uploadToAli(storeAs, file.file);
      const fileObj = {
        picname: file.file.name,
        picurl: uploadUrl,
      };
      this.fileList2.push(fileObj);
      // console.log(file.url);
      console.log(fileObj);
      console.log(this.fileList2);
      // console.log(this.formLabelAlign.pics);
      // this.formLabelAlign.picurl = this.fileList2[0].url;
      // this.formLabelAlign.picname = this.fileList2[0].name;
      this.formLabelAlign.pics.push(fileObj);
      // console.log(this.formLabelAlign.pics);
      // console.log(fileObj);
      // console.log(this.fileList2);
    },

    async toUploadfile3_1(file) {
      var storeAs = "file/" + new Date().getTime() + "&" + file.file.name;
      // this.name = file.file.name
      var uploadUrl = "https://imct.oss-cn-beijing.aliyuncs.com/" + storeAs;
      // this.uploadUrl = uploadUrl
      await uploadToAli(storeAs, file.file);
      const fileObj = {
        name: file.file.name,
        url: uploadUrl,
      };
      this.fileList3_1.push(fileObj);
      this.formLabelAlign.mesh = this.fileList3_1[0].url;
      // console.log(this.formLabelAlign.mesh);
    },

    async toUploadfile3_2(file) {
      var storeAs = "file/" + new Date().getTime() + "&" + file.file.name;
      // this.name = file.file.name
      var uploadUrl = "https://imct.oss-cn-beijing.aliyuncs.com/" + storeAs;
      // this.uploadUrl = uploadUrl
      await uploadToAli(storeAs, file.file);
      const fileObj = {
        name: file.file.name,
        url: uploadUrl,
      };
      this.fileList3_2.push(fileObj);
      this.formLabelAlign.albedo = this.fileList3_2[0].url;
      // console.log(this.formLabelAlign.albedo);
    },

    async toUploadfile3_3(file) {
      var storeAs = "file/" + new Date().getTime() + "&" + file.file.name;
      // this.name = file.file.name
      var uploadUrl = "https://imct.oss-cn-beijing.aliyuncs.com/" + storeAs;
      // this.uploadUrl = uploadUrl
      await uploadToAli(storeAs, file.file);
      const fileObj = {
        name: file.file.name,
        url: uploadUrl,
      };
      this.fileList3_3.push(fileObj);
      this.formLabelAlign.normal = this.fileList3_3[0].url;
      // console.log(this.formLabelAlign.normal);
    },

    async toUploadfile3_4(file) {
      var storeAs = "file/" + new Date().getTime() + "&" + file.file.name;
      // this.name = file.file.name
      var uploadUrl = "https://imct.oss-cn-beijing.aliyuncs.com/" + storeAs;
      // this.uploadUrl = uploadUrl
      await uploadToAli(storeAs, file.file);
      const fileObj = {
        name: file.file.name,
        url: uploadUrl,
      };
      this.fileList3_4.push(fileObj);
      this.formLabelAlign.mask = this.fileList3_4[0].url;
      // console.log(this.formLabelAlign.mask);
    },

    async toUploadfile3_5(file) {
      var storeAs = "file/" + new Date().getTime() + "&" + file.file.name;
      // this.name = file.file.name
      var uploadUrl = "https://imct.oss-cn-beijing.aliyuncs.com/" + storeAs;
      // this.uploadUrl = uploadUrl
      await uploadToAli(storeAs, file.file);
      const fileObj = {
        name: file.file.name,
        url: uploadUrl,
      };
      this.fileList3_5.push(fileObj);
      this.formLabelAlign.emissive = this.fileList3_5[0].url;
      // console.log(this.formLabelAlign.emissive);
    },

    //删除上传的商品
    // onRemove3(file, fileList3) {
    //   this.fileList3 = [];
    //   this.formLabelAlign.documenturl = "";
    //   this.formLabelAlign.documentname = "";
    // },
    //删除前询问
    beforeRemove(file) {
      let a = true;
      if (file && file.status === "success") {
        //放在文件上传成功的判断条件里，是为了防止未上传文件就执行删除操作
        a = this.$confirm(`确定移除 ${file.name}？`);
      }
      return a;
    },
    onRemove3_1(file) {
      // this.fileList3 = [];
      // this.formLabelAlign.documenturl = "";
      // this.formLabelAlign.documentname = "";
      // for (let i=0; i<this.fileList3.length; i++){
      //   if(file == this.fileList3[i]){
      //     this.fileList3.splice(i, 1);
      //   }
      // }
      if(file.name == this.fileList3_1[0].name){
        this.formLabelAlign.mesh = "";
        this.fileList3_1.splice(0, 1);
      }
    },
    onRemove3_2(file) {
      if(file.name == this.fileList3_2[0].name){
        this.formLabelAlign.albedo = "";
        this.fileList3_2.splice(0, 1);
      }
    },
    onRemove3_3(file) {
      if(file.name == this.fileList3_3[0].name){
        this.formLabelAlign.normal = "";
        this.fileList3_3.splice(0, 1);
      }
    },
    onRemove3_4(file) {
      if(file.name == this.fileList3_4[0].name){
        this.formLabelAlign.mask = "";
        this.fileList3_4.splice(0, 1);
      }
    },
    onRemove3_5(file) {
      if(file.name == this.fileList3_5[0].name){
        this.formLabelAlign.emissive = "";
        this.fileList3_5.splice(0, 1);
      }
    },    
    // handleAvatarSuccess(res, file) {
    //   this.imageUrl = URL.createObjectURL(file.raw);
    //   console.log(file.raw);
    // },

    async onUpload() {
      // let price_number = /^[0-9]*$/;
      // for(let i = 0; i < this.fileList2.length; i++) {
      //   var uploadUrl = "https://imct.oss-cn-beijing.aliyuncs.com/" + + new Date().getTime() + "&" + this.fileList2[i].name;
      //   this.pics[i].picurl = uploadUrl;
      // }
      if (
        // this.formLabelAlign.price !== this.formLabelAlign.price.replace(/[^0-9]/g,'')
        this.formLabelAlign.price !== this.formLabelAlign.price.replace(/[^0-9.]/g,'')
      ){
        this.$message.info("请输入数字!");
      } else if (
        this.formLabelAlign.goodname !== "" &&
        this.formLabelAlign.price !== "" &&
        this.formLabelAlign.type !== "" &&
        this.formLabelAlign.typeid !== "" &&
        this.formLabelAlign.introduction !== "" &&
        this.formLabelAlign.coverurl !== "" &&
        this.formLabelAlign.covername !== "" &&
        // this.formLabelAlign.pics !== undefined && array.length > 0 &&
        this.formLabelAlign.pics !== [] &&
        // this.formLabelAlign.documenturl !== "" &&
        // this.formLabelAlign.documentname !== "" &&
        this.formLabelAlign.mesh !== "" &&
        this.formLabelAlign.albedo !== "" &&
        this.formLabelAlign.normal !== "" &&
        this.formLabelAlign.mask !== "" &&
        this.formLabelAlign.emissive !== ""
      ) {
        let payload = { ...this.formLabelAlign };
        var fileList2Filter = this.fileList2.filter(
          (item) => delete item.status && delete item.uid
        );
        payload.pics = fileList2Filter;
        payload.userid = localStorage.getItem("userid");
        doUpload(payload)
          .then((res) => {
            if (res.data.status == "OK") {
              this.$message.success("提交成功");
              this.$router.push("/admin/myinfo/uploadshow");
            } else {
              this.$message.error("提交失败");
              location.reload();
            }
          })
          .catch((err) => {
            EventBus.$emit("closeloading");
          });
      } else {
        this.$message.info("请检查是否上传完整!");
      }
    },
  },
};
</script>
<style scope>
.upload_container {
  background-color: #202020;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.upload_box {
  background-color: #aeaeae;
  width: 100%;
  height: 56px;
  padding: 5px 0;
}
.span_box_1 {
  height: 100%;
  margin: 0%;
  border-width: 0px;
  padding: 6px 8px 8px 17px;
}
.span_box_2 {
  height: 100%;
  margin: 0%;
  border-width: 0px;
  padding: 8px 12px 2px 70px;
}
.title_style {
  height: 100%;
  margin: 0%;
  border-width: 0px;
  padding: 0%;
  font-family: "Youshebiaotihei";
  color: #eeeeee;
  font-size: 36px;
}
.image_style {
  width: 5%;
  height: 8%;
  padding: 0% 0%;
  float: right;
}
.upload_image {
  margin-top: 25px;
  margin-left: 20px;
  flex-direction: row;
  justify-content: flex-start;
  display: flex;
}
.upload_goodinfo {
  margin-top: 60px;
  margin-left: 20px;
  flex-direction: row;
  justify-content: flex-start;
  display: flex;
}
#div1,
#div2 {
  display: inline-block;
}
#div2 {
  margin-left: 50px;
  flex-direction: row;
  justify-content: flex-start;
}
#divtwo {
  margin-top: 80px;
  margin-left: 100px;
}
#goodsIntro {
  display: flex;
  flex-direction: column;
  margin-top: 30px;
  margin-left: 140px;
}
#classification {
  display: flex;
  margin-top: 30px;
  margin-left: 20px;
  width: 800px;
}
/* .div_ {
  width: 100%;
  overflow: hidden;
  padding: 10px 0px;
  display: flex;
  flex-wrap: wrap;
}
.div_n {
  width: calc(25%-30px);
  margin-right: 50px;
} */
.text_style {
  font-family: "Youshebiaotihei";
  color: #eeeeee;
  font-size: 25px;
}
.type_style {
  font-family: "Youshebiaotihei";
  color: #9d632f;
}
/* .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #9d632f;
  border-color: #9d632f;
  font-size: 25px;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #9d632f;
}
.el-checkbox.is-bordered.is-checked{
  border-color: #9D632F;
}
.el-checkbox__input.is-focus .el-checkbox__inner{
  color:  #9D632F;
}  */
.el-radio__input.is-checked + .el-radio__label {
  color: #ecf5ff;
}
.el-radio__input.is-checked .el-radio__inner {
  border-color: #9d632f;
  background: #9d632f;
}
.el-radio__input.is-checked .el-radio__inner {
  border-color: #9d632f;
  background: #9d632f;
  color: #9d632f;
}
/* 上传文件样式 */
.avatar-uploader .el-upload {
  border: 1px solid #383838;
  border-radius: 6px;
  background-color: #383838;
  width: 250px;
  height: 218px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  flex-direction: column;
}
.avatar-uploader .el-upload:hover {
  border-color: #ffffff;
  color: #ffffff;
}
.img_button {
  display: flex;
  flex-direction: column;
}
.coverbutton {
  height: 40px;
  width: 250px;
  margin: 0%;
  font-family: "Youshebiaotihei";
  font-size: 20px;
  color: #a0a0a0;
  background-color: #4b4b4b;
  position: relative;
  left: -110px;
  top: 50px;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 250px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar-uploader-icon1 {
  font-size: 2px;
  color: #8c939d;
  width: 250px;
  height: 178px;
  line-height: 178px;
  position: relative;
  left: -110px;
  top: 50px;
}
.avatar-uploader_1 .el-upload {
  border: 1px solid #383838;
  border-radius: 6px;
  background-color: #383838;
  width: 148px;
  height: 148px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  flex-direction: column;
}
.avatar-uploader_1 .el-upload:hover {
  border-color: #ffffff;
  color: #ffffff;
}
.avatar-uploader-icon_1 {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 100px;
  text-align: center;
}
.avatar-uploader_2 .el-upload {
  border: 1px solid #383838;
  border-radius: 6px;
  background-color: #383838;
  width: 250px;
  height: 36px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  flex-direction: column;
}
.avatar-uploader_2 .el-upload:hover {
  border-color: #ffffff;
  color: #ffffff;
}
.avatar-uploader-icon_2 {
  font-size: 20px;
  color: #8c939d;
  width: 250px;
  height: 25px;
  line-height: 25px;
  text-align: center;
}
/* .goodinfo_form {
  position: relative;
  bottom: -30%;
  width: 150%;
  padding: 0 50px;
  box-sizing: border-box; 
} */
.el-form-item__label {
  font-family: "Youshebiaotihei";
  color: #eeeeee;
  font-size: 20px;
  position: relative;
}
.el-input__inner {
  background-color: #2a2a2a;
  color:#dcdfe6;
  border: 0;
  position: relative;
}
.box-card {
  background-color: #2a2a2a;
  color:#dcdfe6;
  width: 675px;
  height: 300px;
  border: #ffffff;
}
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
}
.uploadbutton {
  height: 60px;
  width: 100px;
  padding: 0%;
  margin: 0%;
  line-height: 40px;
  font-size: 40px;
  font-family: "Youshebiaotihei";
  color: #eeeeee;
  background-color: #aeaeae;
  border: #aeaeae;
  position: relative;
  left: -15%;
}
/* 富文本框 */
.editor {
  line-height: normal !important;
  height: 200px;
}
.ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: "保存";
  padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode="video"]::before {
  content: "请输入视频地址:";
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
</style>